<template>
  <div>
    <Headers />

    <div class="content">
      <div class="left">
        <LeftUp class="left_up" />
        <LeftCenter class="left_center" />
        <LeftDown class="left_down" />
      </div>
      <!-- <div class="center">
    </div> -->
   
      <Amap class="container-map" @complete="complete" @click="mapClick"></Amap>
      <div class="right">
        <RightUp class="right_up" />
        <RightDown class="right_down" />
      </div>
    </div>
    <img src="../../assets/bg2.png" class="bgimg" />
  </div>
</template>

<script setup>
import Headers from "../../components/Header.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftCenter from "./component/LeftCenter.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightDown from "./component/RightDown.vue";

import http from "@/api/http";
import { env } from "@/utils/env";

import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore } from "@/stores/base";
const router = useRouter();
const route = useRoute()
const baseStore = useBaseStore()
let map = null;
let mapInfo = ref([]);
const complete = async (e) => {
  
  map = e
  changeYears(new Date().getFullYear())
}
const mapClick = () => {
  map.clearInfoWindow();
}

window.goBaseOverview2 = async (serialNo) => {
  map.clearInfoWindow();
  for(let item of mapInfo.value){
    if(item.serialNo == serialNo){
      
      baseStore.base = item
    }
  }
  baseStore.backName = route.name
  router.push({
    name: "BaseOverview",
  });
};

let year = ref("");

const changeYears = async (years) => {
  map.clearMap()
 

  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/plan/base/list",
    method: "get",
    params: {
      yearly: years,
    },
  });

  mapInfo.value = res.data;

  mapInfo.value.forEach((item) => {
   
    let newmarker = new AMap.Marker({
      position: [item.lng, item.lat],
      anchor: 'bottom-center',
      map: map
    });
    let text = new AMap.Text({
      text: item.name,
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -50),
      style: {
        'text-align': 'center', background: '#00bfe0', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
      },
      position: [item.lng, item.lat],
      map
    });
    
    const clickHandler = (e, d) => {
      var content = `
        <div style="background: #154c5c;border-radius: 5px;border: 1px solid #24ab9a;z-index: 99; font-size:16px; width: 300px;">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${item.name}</div>
            <div onclick="goBaseOverview2('${item.serialNo}')" style="padding:4px 10px;line-height: 17px;text-align: center;background: #09242c;border-radius: 5px;font-family: Source Han Sans CN;font-weight: bold;color: #2cd7bc;cursor: pointer; font-size:14px;">基地详情</div>
          </div>
          <div style="color: #ffffff; margin: 10px;">${item.remark ? item.remark : '' }</div>
        </div>
      `;

      var infoWindow = new AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        content: content,
      });
      infoWindow.open(map, [item.lng, item.lat]);
    }

    AMap.Event.addListener(newmarker, "click", clickHandler);
    AMap.Event.addListener(text, "click", clickHandler);
  });

  map.setFitView(undefined, false, [160, 160, 160, 160], 14);
};

onMounted(async () => {
 
});
</script>

<style scoped lang="scss">
.bgimg {
  // width: 100%;
  // height: 100%;
  height: vh(800);
  width: vw(1440);
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.container-map {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;

  z-index: 0;
}
.content {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.left {
  width: 27%;
  z-index: 10;
}
.left_up {
  margin: vh(10) vw(10);
  height: vh(230);
}
.left_center {
  margin: vh(10) vw(10);
  height: vh(230);
}
.left_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
.center {
  width: 46%;
}
.right {
  width: 27%;
  z-index: 10;
}
.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}
.right_down {
  margin: vh(10) vw(10);
  height: vh(470);
}
</style>